<template>
    <div>
        <van-nav-bar @click-left="onClickLeft" @click-right="onClickRight">
            <template #left>
                <van-icon name="revoke" size="24" color="#000"/>
            </template>
            <template #right>
                <van-icon name="share-o" size="24" color="#000"/>
            </template>
        </van-nav-bar>
        <!-- 图片轮播 -->
        <van-swipe class="my-swipe" indicator-color="white" width="100%" height="300">
            <van-swipe-item v-for="item in product.data.banner" :key="item.id">
                <img :src="item" alt="">
            </van-swipe-item>
        </van-swipe>
        <!-- 标题及价格框 -->
        <div class="title" v-for="item in product.data" :key="item.id">
            <span>{{item.title}}</span>
        </div>
        <!-- 地址型号选择 -->
        <!-- 商品详情页面，加个视频？ -->
        <!-- 商品下部各种按钮 -->
        <van-goods-action>
            <van-goods-action-icon icon="chat-o" text="客服"/>
            <van-goods-action-icon icon="cart-o" text="购物车" />
            <van-goods-action-icon icon="star-o" text="已收藏"/>
            <van-goods-action-button type="warning" text="加入购物车" />
            <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
    </div>
</template>
<script>
    import {detailsApi} from '../../apis/detailApis'
    export default {
        data() {
            return {
                product:[]
            }
        },
        mounted() {
            this.getDetail()
        },
        methods:{
            onClickLeft(){
                this.$router.go(-1)
            },
            onClickRight(){
                console.log(11);
            },
            async getDetail(){
                this.product = await detailsApi({type:this.$route.query.type})
                console.log(this.product);
            }
        }
    }
</script>

<style lang="less" scoped>
    .van-nav-bar {
        background: #fafafa;
    }
    .van-swipe{
        margin: 8px;
        .van-swipe-item{
            img{
                width: 100%;
                height: 100%;
            }
        }
    }
    
</style>
